<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NMEA Visualizer</title>
    <link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.min.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Content-Language" content="en, english"/>
    <meta name="author" content="@sudheesh001"> <!-- CHANGE THIS -->
    <link rel="icon" type="image/png" href="../../artwork/favicon.png">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
    #map {
        height: 1000px;
    }
    </style>
    <script src="../js/angular.min.js"></script>
    <script src="../js/angular-route.min.js"></script>
    <script src="../js/loklak.js"></script>
</head>
<body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://loklak.org">
            <img src="../../images/loklak_org.png"
                 height="24" style="float:left;">: Advanced Search
            </a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
            </ul>
          </div>
        </div>
      </nav>
    <div class="container-fluid" style="margin-top:50px;">
        <div class="row">
            <div id="map"></div>
        </div>
  <!-- Modal -->
  <div class="modal fade" id="streamUrl" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Enter the stream URL</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-10">
                        <input id="url" name="url" type="url"
                               placeholder="Enter the data stream URL here"
                               class="form-control input-md">
                    </div>
                    <div class="col-md-2">
                        <input type="submit" value="Submit"
                               onclick="getTracking();" class="btn btn-info">
                    </div>
                </div>
            </div>
        </div>
      </div>

    </div>
  </div>
    </div>
    <script>
    $(document).ready(function(){
        $("#streamUrl").modal();
    });

    function getTracking() {
        var url = document.getElementById('url').value;
        var cUrl = window.location.href;
        var pName = window.location.pathname;
        var baseUrl = cUrl.split(pName)[0]
        var urlComplete = "";
        if (baseUrl === "http://apps.loklak.org") {
            urlComplete = 'https://api.loklak.org/api/nmea.txt?stream='+url;
        } else {
            urlComplete = baseUrl + '/api/nmea.txt?stream='+url;
        }
        var centerlat = 52;
        var centerlon =  0;
        // set default zoom level
        var zoomLevel = 2;
        $.getJSON(urlComplete, function (data) {
            var GPSObjects = [];
            for (var key in data) {
                var obj = data[key];
                var latitudeObject, longitudeObject
                for (var prop in obj) {
                    if (prop == 'lat') {
                        latitudeObject = obj[prop];
                    }
                    if (prop == 'long') {
                        longitudeObject = obj[prop];
                    }
                }
                var marker = L.marker([latitudeObject, longitudeObject]).addTo(map);
                spiralCoords = connectTheDots(marker);
                var spiralLine = L.polyline(spiralCoords).addTo(map)
            }
        });
    }
var centerlat = 52;
var centerlon =  0;

// set default zoom level
var zoomLevel = 5;

// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);

// Set up the OSM layer
var background = L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {maxZoom: 18, opacity: 0.5}).addTo(map);

function onEachDot(feature, layer) {
    layer.bindPopup('<table style="width:180px"><tbody><tr><td><div><b>name:</b></div></td><td><div>' +
                    feature.properties.popup +
                    '</div></td></tr><tr class><td><div><b>time:</b></div></td><td><div>' +
                    feature.properties.time + '</div></td></tr></tbody></table>');
}

function connectTheDots(data){
    var c = [];
    for(i in data._layers) {
        var x = data._layers[i]._latlng.lat;
        var y = data._layers[i]._latlng.lng;
        c.push([x, y]);
    }
    return c;
}

// spiralCoords = connectTheDots(spiralLayer);
// var spiralLine = L.polyline(spiralCoords).addTo(map)

/////////////////////////////////////////////////////////////////////////////////////////////
//functions for creating synthetic GeoJSON data//
/////////////////////////////////////////////////////////////////////////////////////////////

//cheapo normrand function
function normish(mean, range) {
    var num_out = ((Math.random() + Math.random() + Math.random() + Math.random() - 2) / 2) * range + mean;
    return num_out;
}

//zero padding for time stamps
function zeroPad(num, places) {
    var zero = places - num.toString().length + 1;
    return Array(+(zero > 0 && zero)).join("0") + num;
}

function make_spiral_json(steps, init_pt, init_angle, init_dist, turn, persistence, wobble, lurch) {

    var spiral = {
        type: "FeatureCollection",
        features: []
    };

    var x = init_pt[1];
    var y = init_pt[0];
    var c = [
        [x, y]
    ];
    var angle = init_angle;
    var dist = init_dist;

    for (var i = 0; i < steps; ++i) {

        var hour = 2 + Math.floor(i / 60);
        var min = zeroPad(i % 60, 2);

        var g = {
            "type": "Point",
                "coordinates": [x, y]
        };
        var p = {
            "id": i,
                "popup": "ping_" + i,
                "time": hour + ':' + min
        };
        spiral.features.push({
            "geometry": g,
                "type": "Feature",
                "properties": p
        });

        x = x + dist * Math.sin(angle) *1.5;
        y = y + dist * Math.cos(angle);
        //        c.push([x, y]);
        dist = dist * (persistence + lurch * normish(0, 1));
        angle = angle + turn + wobble * normish(0, 1);
    }
    return spiral;
}
    </script>
</body>
</html>
